<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="overflow: hidden;">
	<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
			<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="area" label="选择地区：" style="margin-left: -45px;">
					<el-input v-model="searchRuleForm.area" placeholder="请输入地区" style="width: 230px;float: left"></el-input>
					<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 20px;" @click="submitForm()">搜索</el-button>
					<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 22px;" @click="resetForm('searchRuleForm')">重置</el-button>
				</el-form-item>
			</el-form>
	</div>
	<div id="main" style="margin-top: 20px; width: 100%;height:460px;"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  new Vue({
	el: '#app',
	data() {
		return {
			searchRuleForm: {
			  area:''
			}
		}
	},
	methods:{
		resetForm(formName) {
		  this.$refs[formName].resetFields();
		},
		submitForm() {
			const _this = this
			axios.get('http://localhost:8181/customer/areaSexStat?area='+_this.searchRuleForm.area).then(function (resp) {
				for(var i = 0; i <resp.data.length; i++){
					if(resp.data[i].name == 0){
						resp.data[i].name = "女"
					}
					if(resp.data[i].name == 1){
						resp.data[i].name = "男"
					}
				}
				var dom = document.getElementById("main");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '客户地区性别统计',
						x: 'center',
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: resp.data
					},
					series: [
						{
							name: '客户数量(占比)',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: resp.data,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
							animationType: 'scale',
							animationEasing: 'elasticOut',
							animationDelay: function (idx) {
								return Math.random() * 200;
							}
						}
					]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			})
		}
	}
  })
</script>

</html>
